<template>
  <div id="detail">
    <detail-nav-bar class="top-nav" @itemClick="navBarClick" ref="nav"/>

    <BScroll class="better-scroll"
             ref="scroll"
             :probeType="3"
             @scroll="getPosition"
    >
      <detail-swiper :SwiperImg="SwiperImg"/>
      <detail-goods-info :Goods="Goods"/>
      <detail-shop-info :Shop="Shop"/>
      <detail-goods-img-info :detail-info="detailInfo" @imgLoadThink="imgLoadThink" />
      <detail-param-info ref="param" :param-info="paramInfo"/>
      <detail-comment-info ref="comment" :commentInfo="commentInfo"/>
      <detail-recommend-info ref="recommend" :recommend-info="recommendInfo"/>
    </BScroll>
    <detail-buttom-bar @toCartClick="toCartClick"/>
  </div>
</template>

<script>
  import DetailNavBar from "./detailChildren/DetailNavBar";
  import DetailSwiper from "./detailChildren/DetailSwiper";
  import DetailGoodsInfo from "./detailChildren/DetailGoodsInfo";
  import DetailShopInfo from "./detailChildren/DetailShopInfo";
  import DetailGoodsImgInfo from "./detailChildren/DetailGoodsImgInfo";
  import DetailParamInfo from "./detailChildren/DetailParamInfo";
  import DetailCommentInfo from "./detailChildren/DetailCommentInfo";
  import DetailRecommendInfo from "./detailChildren/DetailRecommendInfo";
  import DetailButtomBar from "./detailChildren/DetailButtomBar";




  import {getDetialData,getDetialRecommend} from "../../network/detial";
  import {Goods,Shop,Param} from "../../network/detial";

  import BScroll from "../../components/common/scroll/BScroll";
  import {debounce} from "../../common/untils";

  export default {
    name: "Detail",
    components:{
      DetailNavBar,
      DetailSwiper,
      DetailGoodsInfo,
      DetailShopInfo,
      DetailGoodsImgInfo,
      DetailParamInfo,
      DetailCommentInfo,
      DetailRecommendInfo,
      DetailButtomBar,


      BScroll,
    },
    data(){
      return{
        iid:null,
        SwiperImg:[],
        Goods:{},
        Shop:{},
        detailInfo:{},
        paramInfo:{},
        commentInfo:[],
        recommendInfo:[],
        themeTopYs:[],
        currPoint:0,
      }
    },
    methods:{
      toCartClick(){
        // 获取购物车需要展示的信息
        const product = {}
        product.image = this.SwiperImg[0];
        product.title = this.Goods.title;
        product.desc = this.Goods.discountDesc;
        product.price = this.Goods.lowNowPrice;
        product.iid = this.iid;
        product.isChecked=false;
        //加入全局变量中Vuex
        // this.$store.dispatch('addCart',product)
        this.$store.commit('addCart',product)
        console.log(this.$store.state.Cart);

      },
      imgLoadThink(){
          this.themeTopYs = [];
          this.themeTopYs.push(0);
          this.themeTopYs.push(this.$refs.param.$el.offsetTop);
          this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
          this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
      },

      navBarClick(index){
        this.$refs.scroll.scrollto(0,-this.themeTopYs[index],10)
      },
      getPosition(position){
        const positionY = -(position.y);
        let _lenth = this.themeTopYs.length;
        // if (positionY > this.themeTopYs[3]){
        //   if (this.currPoint!=3){
        //     this.currPoint = 3;
        //     this.$refs.nav.currPoint = this.currPoint;
        //   }
        // }
        for(let i=0; i<_lenth; i++){
          if(this.currPoint !== i && ((positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i+1]) || (i===_lenth-1 &&positionY>=this.themeTopYs[i]))){
            this.currPoint = i;
            // console.log(this.currPoint);
            this.$refs.nav.currPoint = this.currPoint;
          }
        }
      }
    },
    created() {
      this.iid=this.$route.params.iid;
      getDetialData(this.iid).then(
          (res)=>{
            //console.log(res);
            const data=res.data.result;
            //1.获取顶部banner
            this.SwiperImg=data.itemInfo.topImages;
            //2.获取商品详情
            this.Goods=new Goods(data.itemInfo,data.columns,data.shopInfo)
            //3.获取商家信息
            this.Shop =new Shop(data.shopInfo)
            //4.获取商家详情图片
            this.detailInfo = data.detailInfo
            //5.获取参数信息
            this.paramInfo = new Param(data.itemParams.info, data.itemParams.rule)
            //获取用户评论信息
            if(data.rate.cRate !== 0){
              this.commentInfo = data.rate.list
            }
          })
      //获取详情页推荐数据
      getDetialRecommend().then(
          (res)=>{
            this.recommendInfo = res.data.data.list
          }
      )


    }
  }
</script>

<style scoped>
  #detail{
    height: 100vh;
    position: relative;
    z-index: 11;
    background-color: #fff;
  }
  .top-nav {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
  }

  .better-scroll{
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 49px;
    overflow: hidden;

  }

</style>